'use strict'

import React from 'react';
import {
    Text,
    StyleSheet,
    FlatList,
    Image,
    TouchableHighlight,
    Dimensions,
    View
} from 'react-native';
import {Icon} from "@ant-design/react-native";

/*TouchableHighlight  点击高亮显示*/

var width=Dimensions.get('window').width;

export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state ={
            isLoading: true
        }
    }

    _data(){
        return ([{title: 'Title Text', key: 'https://facebook.github.io/react-native/docs/assets/favicon.png'},
            {title: 'Title Text', key: 'https://facebook.github.io/react-native/docs/assets/favicon.png'},
            {title: 'Title Text', key: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}]);
    }

    _onPress(){
        return fetch('https://facebook.github.io/react-native/movies.json')
            .then((response) => response.json())
            .then((responseJson) => {

                console.log(responseJson.movies+"::::::::::::::")
                /*this.setState({
                    isLoading: false,
                    dataSource: responseJson.movies,
                }, function(){

                });*/

            })
            .catch((error) =>{
                console.error(error);
            });
    }

    componentDidMount(){
        console.log("componentDidMount::::::::::::::")
    }

    renderRow(row){
        return (
            <TouchableHighlight
            onPress={()=>this._onPress()}>
                <View style={styles.itemsRow}>
                    <Text style={styles.title}>{row.title}</Text>
                    <Image source={{uri:row.key}} style={styles.thumb}/>
                    <Icon name='account-book' size={28}/>
                    <View style={styles.play}></View>

                    <View style={styles.itemFooter}>
                        <View style={styles.handleBox}>
                            <Icon  name='aliwangwang' size={28}/>
                        </View>
                    </View>
                </View>
            </TouchableHighlight>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headerTitle}>首页</Text>
                </View>

                <FlatList
                    data={this._data()}
                    renderItem={(list) => this.renderRow(list)} />
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },

    header: {
        paddingTop: 25,
        paddingBottom: 12,
        backgroundColor: '#ee735c',
    },

    headerTitle: {
        color: '#fff',
        fontSize: 16,
        textAlign: 'center',
        fontWeight: '600',
    },

    itemsRow:{
        width:width,
        marginBottom:10,
        backgroundColor:'#fff'
    },

    thumb:{
        width:width,
        height:width*0.5,
        resizeMode:'cover'
    },

    title:{
        padding:10,
        fontSize: 18,
        color: '#333'
    },

    itemFooter:{
      flexDirection:'row',
      justifyContent:'space-between',
        backgroundColor:'#eee'
    },

    handleBox:{
        padding:10,
        flexDirection: 'row',
        justifyContent: 'center',
        width:width/2-0.5,
        backgroundColor:'#fff'
    },

    play:{
        position:'absolute',
        bottom:14,
        right:14,
        width:46,
        height: 46,
        paddingTop: 9,
        paddingLeft:18,
        backgroundColor:'transparent',
        borderColor:'#fff',
        borderWidth:1,
        borderRadius:23,
        color:'#ed7b66'
    },

    handleText:{
      paddingLeft: 12,
      fontSize:18,
      color:'#333'
    },

    up:{
        fontSize:22,
        color:'#333'
    },

    commentIcon:{
        fontSize:22,
        color:'#333'
    },

});
